<!--
  银盛： 【参数配置】 页面内容

  @author terrfly
  @site https://www.jeequan.com
  @date 2022/11/03 08:35
-->
<template>
  <AppConfigCommonPage v-if="vdata.isShowAppConfig" ref="appConfigCommonPageRef">
    <template #wxConfigPage>
      <a-divider class="jeepay-m-divider" orientation="left" :orientationMargin="0">
        <span style="font-size: 16px;font-weight: 600;color: var(--ant-primary-color);">微信配置项</span>
      </a-divider>

      <a-col :span="isMobile ? 24 : 16">
        <a-form-item label="商户类型" name="mchType">
          <JeepayYsWxSelect v-model:value="vdata.mchType" />
        </a-form-item>
      </a-col>
      <a-col :span="isMobile ? 24 : 12">
        <a-form-item class="jeepay-valid" label="微信支付目录" style="margin: 0;">
          <a-input v-model:value.trim="vdata.configWxPayBaseUrl" class="form-item-content" />
          <a-button
                  class="jeepay-m-btn"
                  data-type="text"
                  size="small"
                  style="margin-left: 20px !important;"
                  type="primary"
                  @click="configInterfaceFunc('PAY_BASE_URL', vdata.configWxPayBaseUrl)"
          >
            <save-outlined />配置
          </a-button>
        </a-form-item>
      </a-col>
      <a-col :span="isMobile ? 24 : 12">
        <a-form-item class="jeepay-valid" label="关联服务商公众号appId：" style="margin: 0;">
          <a-input v-model:value.trim="vdata.configWxBindAppId" class="form-item-content" />
          <a-button
                  class="jeepay-m-btn"
                  data-type="text"
                  size="small"
                  style="margin-left: 20px !important;"
                  type="primary"
                  @click="configInterfaceFunc('BIND_APP_ID', vdata.configWxBindAppId)"
          >
            <save-outlined />配置
          </a-button>
        </a-form-item>
      </a-col>
      <a-col :span="isMobile ? 24 : 12">
        <a-form-item class="jeepay-valid" label="关联服务商小程序appId：" style="margin: 0;">
          <a-input v-model:value.trim="vdata.configWxBindLiteAppId" class="form-item-content" />
          <a-button
                  class="jeepay-m-btn"
                  data-type="text"
                  size="small"
                  style="margin-left: 20px !important;"
                  type="primary"
                  @click="configInterfaceFunc('BIND_APP_ID', vdata.configWxBindLiteAppId)"
          >
            <save-outlined />配置
          </a-button>
        </a-form-item>
      </a-col>

      <a-col :span="24">
        <div class="jeepay-m-pz">
          <a-popover placement="top">
            <template #title><span>一键配置微信配置项</span></template>
            <template #content>
              <p>顺序：微信支付目录 --> 公众号AppId --> 小程序AppId</p>
              <p>提示： 若有异常则结束配置</p>
            </template>
            <a-button class="jeepay-m-btn" data-type="text" type="primary" @click="autoConfigFunc"><alert-outlined />一键配置微信配置项</a-button>
          </a-popover>
          <!-- <a-button style="margin-left: 20px;" type="primary" @click="queryFunc"><bars-outlined />参数查询</a-button> -->
        </div>
      </a-col>
    </template>
    <template #advancedConfigPage><div /></template>
    <template #activityConfigPage><div /></template>
  </appconfigcommonpage>
</template>

<script lang="ts" setup>

  import { $yspayConfigInterfaceConfig, $queryInterfaceConfig, $applymentAppConfig } from '@/api/manage'
  import { ref, reactive, inject, getCurrentInstance } from 'vue'
  import AppConfigCommonPage from '../../commons/AppConfigCommonPage.vue'
  const { $infoBox } = getCurrentInstance()!.appContext.config.globalProperties

  // 参数注入： 是否手机端
  let isMobile : any = inject('isMobile')

  const appConfigCommonPageRef = ref()

  const vdata : any = reactive({
    detailData: {}, // 数据对象
    recordId: null, // 更新对象ID
    visible: false, // 是否显示弹层/抽屉
    mchAppList: [], // 商户app列表
    configAppId: '',
    isShowAppConfig: true,  // 默认显示应用配置

    partner: '', // 银联第三方交易识别码
    configWxPayBaseUrl: '', // 微信支付目录
    configWxBindAppId: '', // 关联应用
    // configWxBindLiteAppId: '', // 关联小程序
    configWxSubscribeAppId: '', // 关注公众号ID

  })

  // 配置接口相关配置信息
  function configInterfaceFunc(configType, configVal){

    vdata.detailData.storeSuccResParameter = JSON.stringify(vdata.tableData)

    vdata.configAppId = getSelectedConfigAppId()
    if(!vdata.mchType) {
      $infoBox.message.error('请选择商户类型')
      return Promise.reject()
    }

    if(!vdata.configAppId){
      $infoBox.message.error('请选择商户应用')
      return Promise.reject()
    }

    if(!configVal){
      $infoBox.message.error('请填写对应参数值!')
      return Promise.reject()
    }

    let reqData = {
      mchType: vdata.mchType, // 商户类型
      configWxPayBaseUrl: vdata.configWxPayBaseUrl, // 微信支付目录
      configWxBindAppId: vdata.configWxBindAppId, // 关联公众号ID
      // configWxBindLiteAppId: vdata.configWxBindLiteAppId, // 关联小程序
      configWxSubscribeAppId: vdata.configWxSubscribeAppId, // 关注公众号ID
    }

    // return $configInterfaceConfig(vdata.recordId, vdata.configAppId, configType, configVal, null).then((res) => {

    //     if(res.channelState == 'CONFIRM_SUCCESS'){
    //       $infoBox.message.success('配置完成')
    //       return Promise.resolve()
    //     }

    //     $infoBox.modalError('接口配置失败：' + '[' + res.channelErrCode + ']' + res.channelErrMsg)
    //     return Promise.reject()
    // })

    return $yspayConfigInterfaceConfig(vdata.recordId, vdata.configAppId, configType, JSON.stringify(reqData)).then((res) => {

      if(res.channelState == 'CONFIRM_SUCCESS'){
        $infoBox.message.success('配置完成')
        return Promise.resolve()
      }

      $infoBox.modalError('接口配置失败：' + '[' + res.channelErrCode + ']' + res.channelErrMsg)
      return Promise.reject()
    })

  }

  // 一键配置 ( 顺序 --》 先配置本系统的商户应用参数信息 --》 接口侧的 支付目录  --》 appId --> 小程序appId  --> 关注公众号  )【若有报错则停止执行】
  // async await  其实就是 Prosise的语法糖。 只有then才会进入下一个 await
  async function autoConfigFunc(){

    if(!vdata.mchType) {
      $infoBox.message.error('请选择商户类型')
      return Promise.reject()
    }

    await configMchAppIdFunc()

    if(vdata.configWxPayBaseUrl){
      await configInterfaceFunc('PAY_BASE_URL', vdata.configWxPayBaseUrl)
    }

    if(vdata.configWxBindAppId){
      await configInterfaceFunc('BIND_APP_ID', vdata.configWxBindAppId)
    }

// if(vdata.configWxBindLiteAppId){
//   await configInterfaceFunc('BIND_APP_ID', vdata.configWxBindLiteAppId)
// }

    if(vdata.configWxSubscribeAppId){
      await configInterfaceFunc('SUBSCRIBE_APP_ID', vdata.configWxSubscribeAppId)
    }

  }

  // 配置本系统的app应用配置项
  function configMchAppIdFunc(){

    vdata.configAppId = getSelectedConfigAppId()

    if(!vdata.configAppId){
      $infoBox.message.error('请选择商户应用')
      return Promise.reject()
    }

    return $applymentAppConfig(vdata.recordId, vdata.configAppId).then((res) => {
      $infoBox.message.success('商户应用配置完成， 如商户支付方式未配置，请进行方式配置。 ')
      return Promise.resolve()
    })

  }

  // 对外暴露的 页面渲染函数  也用作初始化
  function pageRender (applyId){

    if (applyId) {
      vdata.recordId = applyId
      // 显示默认
      $queryInterfaceConfig(applyId, null, null).then((res2) => {
        vdata.configWxPayBaseUrl = res2.paySiteUrl
        vdata.configWxBindAppId = res2.wxAppId
        vdata.configWxBindLiteAppId = res2.wxLiteAppId
        vdata.configWxSubscribeAppId = res2.wxAppId
      })

      appConfigCommonPageRef.value.pageRender(applyId) // 直接调用通用组件
    }else{
      vdata.isShowAppConfig = false
    }

  }

  function getSelectedConfigAppId (){
    return appConfigCommonPageRef.value.getSelectedConfigAppId()
  }

  // 不支持商户应用配置进入的配置（ 仅支持进件完成后的配置，如配置到应用 配置费率这些 ）
  function unsupportAppConfigMode(){
    return true
  }

  defineExpose({ pageRender, getSelectedConfigAppId, unsupportAppConfigMode })
</script>
<style scoped>

  .form-item-content{
    width: 70%
  }

</style>
